<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">

<html lang="ch" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title th:text="${title}"></title>
        <link rel="stylesheet" href="/static/layui/css/layui.css">
        <style>
            .layui-show {
                display: block !important;
                height: inherit !important;
            }
        </style>
    </head>
    <body>
        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">
                <div class="layui-logo layui-hide-xs layui-bg-black">Spring Boot 脚手架</div>
                <!-- 头部区域（可配合layui 已有的水平导航） -->
                <ul class="layui-nav layui-layout-left">
                    <!-- 移动端显示 -->

                </ul>
                <!-- 个人头像及账号操作 -->
                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                        <a href="javascript:;" id="userName">
                            <!--<img src="/static/img/default.jpg" class="layui-nav-img"> -->
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a href="">个人中心</a></dd>
                            <dd><a href="">账号设置</a></dd>
                            <dd><a href="/auth/logout">账号登出</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                        <a href="javascript:;">
                            <i class="layui-icon layui-icon-more-vertical"></i>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                    <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
                    </ul>
                </div>
            </div>

            <div class="layui-body" style="overflow: hidden">
                <!-- 内容主体区域 -->
                <div class="layui-tab" lay-filter="dataTab" lay-allowClose="true" style="height: 100%;">
                    <ul class="layui-tab-title">
                        <li class="" lay-id="top">首页</li>
                    </ul>
                    <div class="layui-tab-content" style="height: 100%;">
                        <div class="layui-tab-item layui-show">
                            <img src="/static/img/default.jpg" alt="默认">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="/static/layui/layui.js"></script>
        <script th:inline="javascript" src="/static/js/commonUtils.js"></script>
        <script th:inline="javascript">
            let $, element, table;
            layui.use(['jquery', 'element', 'table'], function () {
                $ = layui.jquery;
                element = layui.element;
                table = layui.table;

                handleHeader();

                queryMenu();
            });

            function handleHeader() {

                /*<![CDATA[*/
                console.log("userId:" + /*[[${tokenInfo}]]*/);
                console.log("user:" + /*[[${user}]]*/);
                var userId = [${tokenInfo.loginId}];
                /*]]>*/
                sendGetSync("/user/details", {'id': userId}, true).then(function (res) {
                    if (res.status === 200) {
                        var ref = JSON.parse(res.result);
                        if (ref.code === 200) {
                            var refData = ref.data;
                            var html = '<img src="' + refData.avatar + '" class="layui-nav-img" alt="头像"><span>' + refData.realName + '</span>';
                            $("#userName").html(html);
                        }
                    }
                });
            }

            function queryMenu() {
                var resp = sendGet("/auth/powerList", null, true);
                resp.then(function (result) {
                    if (result.status === 200) {
                        var ref = JSON.parse(result.result);
                        let html = '';
                        var menu = ref.data['sysMenus'];
                        var roleCode = ref.data['sysRole']['code'];
                        menu = listToTree(menu, 'code', 'parentCode', 'children')
                        $.each(menu, function (i, n) {
                            // html += '<li class="layui-nav-item layui-nav-itemed">'; 默认展开
                            html += '<li class="layui-nav-item">';
                            html += ' <a href="javascript:;">' + menu[i].name + '</a>';
                            //判断当前一级节点是否存在节点
                            if (menu[i].children) {
                                html += ' <dl class="layui-nav-child">';
                                let childern = menu[i].children;
                                $.each(childern, function (index, node) {
                                    html += ' <dd><a href="javascript:;" onClick="openTab(\'' + childern[index].name + '\',\'' + childern[index].url + '\',\'' + childern[index].code + '\')">' + childern[index].name + '</a></dd>';
                                })
                                html += ' </dl>';
                            }
                            html += '</li>';
                        });
                        $("#menu").html(html);
                        element.render('nav');
                    } else {
                        alert(ref.message);
                    }
                });
            }

            function openTab(title, url, _menuCode) {
                let $node = $("li[lay-id='" + _menuCode + "']");
                if ($node.length === 0) {
                    // 新增一个Tab项
                    element.tabAdd('dataTab', {
                        title: title,//用于演示
                        content: '<iframe id=' + _menuCode + ' src=' + url + '?pageCode=' + _menuCode + ' style="border: 0;width:100%;height:100%;"></iframe>',
                        id: _menuCode
                    });
                }
                //切换到指定选项卡
                element.tabChange('dataTab', _menuCode);
            }

        </script>
    </body>
</html>